{% set categoriesFirst = data('Categories',{'group':'course'})%}
<div class="container">
  <div class="text-line">
    <h5><span>面授课程</span><div class="line"></div></h5>
    <!-- <div class="subtitle">精选网校课程，满足你的学习兴趣。</div> -->
  </div>
  <div class="course-filter" id="offline-filter">
    <ul class="nav nav-pills hidden-xs" role="tablist">
      <li role="presentation" class="{% if (categoryId|default('all') == 'all') %}active {% endif %} js-course-filter"data-url="{{path('homepage_category',{categoryId : 'all', tags:'7',orderBy : orderBy|default('latest')}) }}"><a href="javascript:;">全部课程</a></li>
      {% if categoriesFirst%}
        {% for category in categoriesFirst  if (category.parentId == 0) %}
          {% if ( loop.index0 < 10 ) %}
            <li role="presentation" class="{% if (categoryId|default('all') == category.id) %}active {% endif %} js-course-filter"data-url="{{path('homepage_category',{categoryId : category.id, tags:'7', orderBy : orderBy|default('latest')}) }}"><a href="javascript:;">{{ category.name }}</a></li>
          {% endif %}
        {% endfor %}
      {% endif %}
    </ul>
    <div class="btn-group visible-xs">
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">全部课程 <span class="caret"></span></button>
      <ul class="dropdown-menu" role="menu">
        <li role="presentation" class="js-course-filter {% if (categoryId|default('all') == 'all') %}active {% endif %}" data-url="{{path('homepage_category',{categoryId : 'all', tags:'7', orderBy : orderBy|default('latest')}) }}"><a href="javascript:;">全部课程</a></li>
        {% if categoriesFirst%}
          {% for category in categoriesFirst  if (category.parentId == 0) %}
            {% if ( loop.index0 < 10 ) %}
              <li role="presentation" class = "js-course-filter {% if (categoryId|default('all') == category.id) %}active {% endif %}" data-url="{{path('homepage_category',{categoryId : category.id, tags:'7', orderBy : orderBy|default('latest')}) }}"><a href="javascript:;">{{ category.name }}</a></li>
            {% endif %}
          {% endfor %}
        {% endif %}
      </ul>
    </div>
    <div class="course-sort btn-group">
      <a href="javascript:;" class="btn btn-default {% if (orderBy|default('recommendedSeq') == 'recommendedSeq') %} active {% endif %}js-course-filter" data-url="{{path('homepage_category',{categoryId : categoryId|default('all'), tags:'7', orderBy : 'recommendedSeq'}) }}">
        推荐
      </a>
      <a href="javascript:;" class="btn btn-default {% if (orderBy|default('recommendedSeq') == 'studentNum') %} active {% endif %}js-course-filter" data-url="{{path('homepage_category',{categoryId : categoryId|default('all'), tags:'7', orderBy : 'studentNum'}) }}">
        最热
      </a>
      <a href="javascript:;" class="btn btn-default {% if (orderBy|default('recommendedSeq') == 'latest') %} active {% endif %}js-course-filter" data-url="{{path('homepage_category',{categoryId : categoryId|default('all'), tags:'7', orderBy : 'latest'}) }}">
        最新
      </a>
    </div>
  </div>
  <div class="course-list">
    <div class="row">
      {% for course in offline %}
       {% if course.isshow == 1 %}
        <div class="col-lg-3 col-md-4 col-sm-6">
          {% include 'TopxiaWebBundle:Course:Widget/course-grid.html.twig' %}
        </div>
	{% endif %}
      {% endfor %}
    </div>
  </div>
  <div class="text-center mvl">
    <a href="{{ path('course_explore',{tags : '7'}) }}" class="btn btn-default btn-lg">
      更多课程 <i class="mrs-o es-icon es-icon-chevronright"></i>
    </a>
  </div>
</div>